{% extends "../master.html" %}
{% block hfm_css %}
<style type="text/css">
    .layui-btn-warm{
        background-color: green;
    }
</style>
{% end %}
{% block page_content %}
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">任务管理</a>
        <a><cite>站点监测</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form layui-col-space5">
{#                        <!--{% raw xsrf_form_html() %}-->#}
                        <div class="layui-input-inline layui-show-xs-block">
                            <input type="text" id="id_task" name="taskname" placeholder="任务名称" autocomplete="off" class="layui-input">
                        </div>
                        <!--
                        <div class="layui-input-inline layui-show-xs-block">
                           <select name="contrller" id ='id_type'>
                              <option value="">任务类型</option>
                              <option value="内容监测">内容监测</option>
                              <option value="资产发现">资产发现</option>
                              <option value="安全巡检">安全巡检</option>
                            </select>
                        </div>
                        -->
                        <div class="layui-input-inline layui-show-xs-block">
                            <select name="contrller" id ='id_status'>
                              <option value="">任务状态</option>
                              <option value="0">待执行</option>
                              <option value="1">执行中</option>
                              <option value="2">已完成</option>
                              <option value="3">已结束</option>
                            </select>
                        </div>
                    </form>
                    <div class="layui-input-inline layui-show-xs-block TaskTable">
                        <button class="layui-btn" lay-submit="" lay-filter="sreach" data-type="reload">
                            <i class="layui-icon">&#xe615;</i></button>
                    </div>
                </div>
                <xblock>
                    <div class="layui-card-header TaskTable">
                        <button class="layui-btn" onclick="xadmin.open('任务新建','/task/add',850,500)">
                            <i class="layui-icon layui-icon-add-1"></i>新建
                        </button>
                        <button type="button" class="layui-btn layui-btn-danger" id="task_delete" data-type="deletechoice">
                            <i class="layui-icon layui-icon-delete"></i>删除
                        </button>
                    </div>
                </xblock>
                <!-- task table-->
                <div class="layui-card-body">
                    <table class="layui-table layui-form" id="task_table" lay-filter="option"></table>
                </div>
                <!--task table-->
            </div>
        </div>
    </div>
</div>
{% block sechfm_js %}
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="start">开启</a>
    </script>
{% end %}

<script>
//var xsrf = $('input[name="_xsrf"]').val();
layui.use('table', function() {
    var table = layui.table;
    //方法级渲染
    table.render({
        elem: '#task_table'
        , url: "/task/list"
        , method: 'post'
        //,where: {'xsrf_token':xsrf}
        , cols: [[
            {checkbox: true, fixed: true,width:80}
            , {field: 'taskname', title: '任务名称'}
            //,{field:'task_type', title: '任务类型'}
            , {field: 'sitenum', title: '站点数量',style:"color:#00c3ff",align:'center'}
            //, {field: 'progres', title: '任务进度'}
            ,{field:'status', title: '任务状态', sort: true, align:'center',
                templet:function (data) {
                   var $color = "";
                   var $text = "待执行";
                   if(data.status == "执行中"){
                       $color = "#5fb787";
                       $text = "执行中";
                   }else{
                       $color = "#ffa81f";
                   }
                   {#return "<div style='padding:0 5px;line-height:28px;height:27px;width:80%;font-size:12px;color:#fff;border-radius: 15px 15px;background: "+$color+"'><button class='layui-btn layui-btn-xs'>"+$text+"</button></div>"#}
                   return "<div class=\"layui-table-cell\"'><button class='layui-btn layui-btn-xs' style='background: "+$color+"'>"+$text+"</button></div>"
                }}
            , {field: 'near24h', title: '近24h抓取量', sort: true,style:"color:#1c4d81",align:'center'}
            , {field: 'countnum', title: '总抓取量', sort: true,style:"color:#1c4d81",align:'center'}
            , {field: 'creatname', title: '创建人员'}
            , {field: 'creat_at', title: '创建时间', sort: true}
            ,{ title: '高级选项',fixed: 'right', align:'center', toolbar: '#barDemo'}
        ]]
        , id: 'testReload'
        , page: true
        , limit: 15
        , text: {none: '目前暂无数据'}
    });
    //头工具栏事件
    table.on('tool(option)', function(obj){
        var checkStatus = obj.data;
        if(obj.event === 'edit'){
            layer.confirm('点击确认可编辑任务【'+checkStatus.taskname+'】*任务名称和站点列表不支持修改，',function(index){
                layer.msg('客官不不可以');
            })
        }else if(obj.event === 'start'){
            var Task = obj.data;
            console.log(Task);
            layer.confirm('点击确认开启任务【'+Task.taskname+'】',function(index){
                $.ajax({
                    type: "put",
                    url: '/task/list',
                    async: true,
                    data:{
                        taskname: Task.taskname,
                        status: Task.status,
                        action:'start',
                    },
                    success:function (data) {
                        layer.msg(data.msg);
                        setTimeout((function () {
                            location.replace(location.href)
                        }));
                    }
                });
            })
        }
    });
    // 操作
    var $ = layui.$, active = {
        // 删除任务
        deletechoice: function(){ //获取选中数据
                var checkStatus = table.checkStatus('testReload')
                ,data = checkStatus.data
                ,list=new Array();
                for(var i=0;i<data.length;i++){
                    list[i] = data[i].taskname
                }
                layer.confirm('该操作为敏感操作<br>点击确认删除任务【'+data[0].taskname+'】该操作删除后无法恢复！',function(index){
                    $.ajax({
                        type: "delete",
                        url: '/task/list',
                        async: true,
                        data:{
                            task_list:JSON.stringify(list),
                            action:'start',
                        },
                        success:function (data) {
                            layer.msg(data.msg);
                            setTimeout((function () {
                                location.replace(location.href)
                            }));
                        }
                    });
                })
            }
        ,reload: function() {
            //执行重载
            //alert($('#id_task').val());
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    taskname: $('#id_task').val()
                    ,status: $("#id_status option:selected").val()
                }
            });
            }
        };
        $('.TaskTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

})
</script>

{% end %}